<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Position(定位)</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box1,
			.box2,
			.box3,
			.box4 {
				width: 100px;
				height: 100px;
			}

			.box1 {
				background-color: #f00;
				position: relative;
				left: 100px;
			}

			.box2 {
				background-color: #eee;
			}

			.box3 {
				background-color: #0f0;
				position: absolute;
				left: 110px;
			}

			.box4 {
				background-color: #00f;
			}

			.box5 {
				width: 200px;
				height: 300px;
				border: 1px solid red;
				overflow-y: auto;
			}

			.list {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-bottom: 1px solid #ccc;
			}

			.sticky {
				position: sticky;
				top: 0;
				background-color: #f00;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<!--
    position 属性的五个值：
    static (默认值) 不进行定位，元素出现在正常的流中（忽略 top, bottom, left, right 值）
    relative 相对定位，元素相对于其正常位置进行定位（top, bottom, left, right 值相对于元素本身进行偏移）
    fixed 固定定位，元素相对于浏览器窗口进行定位（不随页面滚动而变化）
    absolute 绝对定位，元素相对于最近的已定位祖先元素进行定位（绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>）
    sticky 粘性定位，元素相对于最近的已定位祖先元素进行定位，当元素进入视口时，它会固定在原来的位置（类似于 relative，但元素会在屏幕边缘保持固定位置）
    -->
		<div class="box1">相对定位</div>
		<div class="box2">相对定位</div>

		<hr />

		<div class="box3">绝对定位</div>
		<div class="box4">绝对定位</div>

		<hr />

		<div class="box5">
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list sticky">*** 粘性定位 ***</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
			<div class="list">粘性定位</div>
		</div>
	</body>
</html>
